<template>
  <q-page>
    <div class="container">
      <div class="row q-col-gutter-md"
           v-if="content && content.data">
        <div v-for="(item, key) in content.data"
             :key="key"
             :class="item.type && item.type.toLowerCase() === 'content' ? 'col-12' : 'col-xs-12 col-sm-6'">
            <server-card v-if="item.type && item.type.toLowerCase() === 'server_card'"
                         :data="item"/>
            <content-area v-else-if="item.type && item.type.toLowerCase() === 'content'"
                          :data="item"/>
            <notification-card v-else
                               :data="item"/>
        </div>
        <!--
        <div class="col-xs-12 col-md-6"
             v-for="_item in notifications"
             :key="(typeof _item === 'object') ? _item[Object.keys(_item)[0]] : _item">
          <transition appear
                      enter-active-class="animated zoomIn"
                      leave-active-class="animated zoomOut">
            <notification-card :data="_item"/>
          </transition>
        </div>
        <div class="col-xs-12 col-md-6"
             v-for="(item, key) in servers"
             :key="key">
          <transition appear
                      enter-active-class="animated zoomIn"
                      leave-active-class="animated zoomOut">
            <server-card :data="item"/>
          </transition>
        </div>
        -->
      </div>
    </div>
  </q-page>
</template>

<script>
  import ServerCard from "src/components/ServerCard";
  import NotificationCard from "src/components/NotificationCard";
  import ContentArea from "src/components/ContentArea";

  export default {
    name: 'PageIndex',
    components: {ContentArea, NotificationCard, ServerCard},
    data: function () {
      return {};
    },
    computed: {
      data: {
        get() {
          return this.$store.state.data;
        },
        set(v) {
          this.$store.commit('updateData', v);
        }
      },
      content: {
        get() {
          if (this.data && this.data.content)
            for (const i of this.data.content) {
              if (i.name === this.$route.params.name) return i;
            }
          return null;
        }
      }
    },
    methods: {},
    async mounted() {
      this.$q.loading.show();
      console.log(this.$route.params.name);
      this.$q.loading.hide();
    }
  }
</script>
<style>
code {
  color: black
}
</style>
